<template>
  <div class="pushTask">
    <ZgNewPage
      title="推送任务管理"
      ref="page"
      :extraHeight="365"
      :scrollX="1500"
      :addBtnName="addName"
      :pageOpt="pageOpt"
      :batchBtns="batchBtns"
      :dataBtns="dataBtns"
      :conditions="conditions"
      @search="getList"
      @add="showAdd"
      @batch="onBatch"
      @admin="toAdmin"
    >
      <template slot="tabs">
        <a-tabs v-model="activeTab">
          <a-tab-pane v-for="tab in tabArr" :key="tab.value" :tab="tab.label"></a-tab-pane>
        </a-tabs>
      </template>
      <template slot="columns">
        <a-table-column title="任务名称" dataIndex="taskName"></a-table-column>
        <template v-if="activeTab === 'database'">
          <!-- <a-table-column key="source" title="源数据">
          </a-table-column> -->
          <a-table-column title="源数据编码" dataIndex="sourceDatasourceCode"></a-table-column>
          <a-table-column title="源数据表名" dataIndex="sourceTableName"></a-table-column>
          <a-table-column title="目标数据编码" dataIndex="targetDatasourceCode"></a-table-column>
          <a-table-column title="目标数据表名" dataIndex="targetTableName"></a-table-column>
          <!-- <a-table-column key="target" title="目标数据">
          </a-table-column> -->
        </template>
        <template v-else>
          <a-table-column title="推送类型" dataIndex="pushMode">
            <template slot-scope="text">{{ text === 'full' ? '全量' : '增量' }}</template>
          </a-table-column>
          <!-- <a-table-column title="接口url" dataIndex="url"></a-table-column> -->
        </template>
      </template>
    </ZgNewPage>
    <ZgDialog v-model="dialogVisible" @ok="addPushSave" @cancel="addPushCancel" title="新增任务推送">
      <AddPush ref="addPush" :formDisabeld="formDisabeld" :operaType="operaType" />
    </ZgDialog>
    <ZgDrawer width="80%" v-model="showDraw" title="字段映射">
      <FieldMap :codeTableInfo="codeTableInfo" @ok="fieldMapOk" ref="fieldMap" />
    </ZgDrawer>
    <ZgDialog v-model="configVisible" @ok="configSave" title="接口配置">
      <RestConfig ref="restConfig" :codeTableInfo="codeTableInfo" /> </ZgDialog
    >addPush
  </div>
</template>
<script>
export default {
  data() {
    return {
      addName: '新增推送',
      // 新增任务弹框
      dialogVisible: false,
      // 接口配置弹框
      configVisible: false,
      pageOpt: {
        // 查询功能
        showSearchBtn: false,
        // 刷新功能
        showRefreshBtn: false,
        // 筛选功能
        showConditionBtn: false,
        // 表头设置功能
        showHeaderConfig: false,
        // 布局模式设置功能
        showLayoutMode: false
      },
      conditions: [{ code: 'taskName', compType: '单行文本', label: '任务名称', defaultVal: '' }],
      batchBtns: [
        // { key: 1, label: '批量删除' },
        // { key: 2, label: '批量修改' },
        // { key: 3, label: '数据排序' }
      ],
      dataBtns: [
        {
          key: 'detail',
          name: '详情',
          type: 'link',
          isShow: () => true
        },
        {
          key: 'edit',
          name: '修改',
          type: 'link',
          isShow: () => true
        },
        {
          key: 'delete',
          name: '删除',
          type: 'link',
          isShow: () => true
        },
        {
          key: 'fieldMap',
          name: '字段映射',
          type: 'link',
          isShow: () => true
        },
        {
          key: 'config',
          name: '配置',
          type: 'link',
          isShow: () => false
        }
      ],
      // tab
      activeTab: 'database',
      tabArr: [
        { label: '数据库', value: 'database' },
        { label: '接口', value: 'rest' }
      ],
      // 网关前缀
      gateWayPrefix: '/zg-datapush',
      formDisabeld: false,
      operaType: 'add',
      showDraw: false,
      codeTableInfo: {}
    }
  },
  components: {
    AddPush: () => import('./addPush.vue'),
    FieldMap: () => import('./fieldMap.vue'),
    RestConfig: () => import('./restConfig.vue')
  },
  watch: {
    activeTab(val) {
      /* eslint-disable */
      this.dataBtns[4].isShow = () => (val === 'rest' ? true : false)
      /* eslint-enable */
      this.$refs.page.search()
    }
  },
  computed: {},
  methods: {
    // 获取列表
    getList(params) {
      this.$http.post(
        `${this.gateWayPrefix}/datapush/task/page`,
        Object.assign(params, {
          targetType: this.activeTab
        }),
        (data) => {
          const { records, total } = data
          this.$refs.page.endSearch({
            total: Number(total),
            list: records
          })
        }
      )
    },
    showAdd() {
      this.setDialog('add', '新增任务推送', true, false)
      this.$nextTick(() => this.addPushCancel())
    },
    // 新增任务保存
    addPushSave() {
      const { operaType } = this
      if (operaType === 'check') this.setDialog('check', '新增任务推送', false, false)
      else if (['add', 'edit'].includes(operaType)) {
        this.$refs.addPush.save().then(() => {
          this.setDialog('add', '新增任务推送', false, false)
          this.$refs.page.search()
        })
      }
    },
    // 操作按钮
    toAdmin(data) {
      const { key, obj } = data
      if (key === 'detail') {
        this.setDialog('check', '查看任务推送', true, true)
        this.$nextTick(() => {
          Object.assign(this.$refs.addPush.form, { ...obj })
        })
      } else if (key === 'edit') {
        this.setDialog('edit', '编辑任务推送', true, false)
        this.$nextTick(() => {
          Object.assign(this.$refs.addPush.form, { ...obj })
        })
      } else if (key === 'delete') {
        this.confirm(() => {
          this.$http.post(`${this.gateWayPrefix}/datapush/task/delete`, { ids: [obj.id] }, () => {
            this.$message.success('删除成功')
            this.$refs.page.search()
          })
        }, '确定要删除这条数据么')
      } else if (key === '字段映射') {
        Object.assign(this.codeTableInfo, { ...obj })
        this.showDraw = true
        this.$nextTick(() => {
          const { getMappingData, initData } = this.$refs.fieldMap
          initData()
          getMappingData()
        })
      } else if (key === 'config') {
        Object.assign(this.codeTableInfo, { ...obj })
        this.configVisible = true
        this.$nextTick(() => {
          this.$refs.restConfig.getConfigInfo()
        })
      }
    },
    // 弹框属性设置
    setDialog(operaType, title, visible, disable) {
      // this.$refs.addPush.resetFields()
      Object.assign(this, {
        operaType,
        dialogTitle: title,
        dialogVisible: visible,
        formDisabeld: disable
      })
    },
    // 字段映射
    fieldMapOk() {
      this.showDraw = false
    },
    // 接口配置保存
    configSave() {
      this.$refs.restConfig.save().then(() => (this.configVisible = false))
    },
    addPushCancel() {
      this.$refs.addPush.resetFields()
    },
    onBatch() {}
  },
  created() {},
  mounted() {}
}
</script>
<style lang="less" scoped></style>
